<template>
  <!-- 新建文件夹对话框 -->
  <el-dialog
    title="填报情况"
    :width="device === 'mobile' ? '90%' : '50%'"
    :visible.sync="visible"
    @close="onClose"
    class="weekly-report-statisc-dialog"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="已填报人员" name="first">
        <report-user-info-table
          :dataSource="reportData.import_list"
        />
      </el-tab-pane>
      <el-tab-pane label="未填报人员" name="second">
        <report-user-info-table
          :dataSource="reportData.no_import_user_list"
        />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "WeeklyReportStatiscModal",
  props: {
    onClose: {
      type: Function
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    reportData: {
      type: Object
    }
  },
  components: {
    ReportUserInfoTable: () => import("./ReportUserInfoTable.vue")
  },
  computed: {
    ...mapGetters(["device"])
  },
  watch: {
    dialogVisible(value) {
      this.visible = value;
    }
  },
  data() {
    return {
      visible: false,
      date: "",
      option: "toPdf",
      activeName: 'first'
    };
  }
};
</script>
<style lang="scss">
.weekly-report-statisc-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>